<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width" />
    <title>播放</title>
		<!--Tis默认UI样式-->
		<link href="http://cdn.aodianyun.com/tis/ui/default/css/jquery.splitter.css" rel="stylesheet" />
		<link href="http://cdn.aodianyun.com/tis/shared/css/idangerous.swiper.css" rel="stylesheet" />
		<!-- <link href="http://cdn.aodianyun.com/tis/ui/default/css/tis-ui-1.1.css" rel="stylesheet" /> -->
		<!--Tis基础库-->
		<script type="text/javascript" src="http://cdn.aodianyun.com/static/jquery/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="http://cdn.aodianyun.com/tis/core/tis-api-1.1.js"></script>
		<script type="text/javascript" src="http://cdn.aodianyun.com/tis/core/tis-1.1.js"></script>
		<!--Tis默认UI脚本-->
		<script type="text/javascript" src="http://cdn.aodianyun.com/tis/ui/default/js/jquery.splitter-0.14.0.js"></script>
		<script type="text/javascript" src="http://cdn.aodianyun.com/tis/shared/js/idangerous.swiper-2.0.min.js"></script>
		<script type="text/javascript" src="http://cdn.aodianyun.com/tis/ui/default/js/tis-ui-1.1.js"></script>
		<!-- <script type="text/javascript" src="https://cdn.aodianyun.com/tis/ui/perty/js/tis-ui-1.1-perty.js"></script> -->

		<script type="text/javascript" src="../script/common.js"></script>
		<script type="text/javascript" src="../script/api.js"></script>
		<script type="text/javascript" src="../script/tis-ui-1.1-perty.js"></script>

		<link rel="stylesheet" href="../css/tis-ui-1.1.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/gotye.css"/>
    <style>
    	body{
				margin: 0px;
				padding: 0px;
				background:transparent;
				/*background-image: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1025808187,1573015942&fm=15&gp=0.jpg');
				background-repeat: no-repeat;
				background-size: cover;*/
        }

				.chat-box {
            height: 265px;
						width: 260px;
						position:fixed;
						bottom:0;
            filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=3);/*ie*/
            -moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
            /*-webkit-box-shadow: 2px 2px 10px #909090;
            box-shadow:2px 2px 10px #909090;*/
						background: rgba(249,249,249,0);
        }
				.tis-msgs-panel a{
					color: white;
				}

    </style>
		<script>
		function getQueryStr(str) {
				var LocString = String(window.document.location.href);
				//console.log('00000000000000000000000'+LocString+'00000000000000000000000');
				var rs = new RegExp("(^|)" + str + "=([^&]*)(&|$)", "gi").exec(LocString), tmp;
				//console.log('11111111111111111111111'+rs+'11111111111111111111111');return;
				if (tmp = rs) {
						return decodeURIComponent(tmp[2]);
				}
				return "";
		}
		$(function () {
				var api = TISAPI.New('http://www.qiersan.com/live/live/chat', { tisId: getQueryStr("") }, false);

				window.tis = TIS(".tis-container", {
						api: api,                               //必须
						//clientid:"clientId1"                  //可选，默认随机生成
						name: "匿名",                           //可选，默认为Anonymous
						image: "http://cdn.aodianyun.com/tis/ui/default/img/anonymous.png",          //可选，默认未定义
						generateUserEvent: true,             //可选，默认为true
						template:           tis_perty_ui,     //界面模版
						//以下均可选
						failure: function (error, when) {       //某个操作失败时调用
								if (typeof error != "string") {
										if (when == "sendMsg" && error.code == 400 && error.error == "instance closed") {
												alert("TIS实例已关闭");
												return;
										}
										alert(when + "操作失败");
								} else {
										alert("操作失败：" + error);
								}
						},
						onSendSuccess: function (data) {
								//当发送消息成功时调用
								console.log("消息发送成功");
						},
						onReconnect: function () {
								//当需要与服务器重新连接时调用
								console.log("正在与服务器重连");
						},
						onConnect: function () {
								//当与服务器连接成功时调用
								console.log("与服务器重连接成功");
						},
						onLoadComponent: function () {
								//当组件加载完成时调用
								console.log("组件加载完成");
						},
						updateUser: function (total, clientId) {
								//$api.text($api.byId('viewerCount'),total);
								//当generateUserEvent=true,并且在线人数发生变化时调用
								console.log("在线人数:",total);
						}
				});
		});
</script>
</head>
<body>
	<div class="mask" tapmode onclick="resetmask();"></div>
	<img class="console-main" id="consoleMain" src="../image/publisher/hexagon.png" style="background: transparent;left:85%;border: none;" tapmode onclick="showConsole();event.cancelBubble=true;"/>
	<div class="console" id="console">
		<div class="console-main" id="consoleMain"><div class="console-main-btn" id="consoleMainBtn" tapmode onclick="startPublisher(this);event.cancelBubble=true;"></div></div>
		<div class="console-other-btn" tapmode onclick="switchCamera();event.cancelBubble=true;">
			<img src="../image/publisher/camera.png"/>
		</div>
		<div class="console-other-btn" style="margin-top: 27px;margin-left: -40px;" tapmode onclick="shareurl();event.cancelBubble=true;">
			<img src="../image/publisher/share.png"/>
		</div>
		<div class="console-other-btn" style="margin-top: 60px;margin-left: -50px;" tapmode onclick="setScreen();event.cancelBubble=true;">
			<img src="../image/publisher/screen.png"/>
		</div>
		<div class="console-other-btn" style="margin-top: 95px;margin-left: -37px;" tapmode onclick="setTorch();event.cancelBubble=true;">
			<img id="torchImg" src="../image/publisher/torchoff.png"/>
		</div>
		<div class="console-other-btn" style="margin-top: 115px;" tapmode onclick="setFilter();event.cancelBubble=true;">
			<img id="filterImg" src="../image/publisher/filteroff.png"/>
		</div>
	</div>

	<div class="close-btn" tapmode onclick="closeAlert();event.cancelBubble=true;"><img class="btn-img" src="../image/close.png" /></div>

  <div class="tis-container chat-box"></div>
</body>

<script type="text/javascript">
var is_start = 1;
var is_mute = 1;
var is_flash = 1;
var is_start_capture = 0;
var is_beauty = 1;

//返回
function goEventBack(){
	goBack();
	api.sendEvent({name: 'menuGoBack'});
}

var session={};
var UIInputId;
var publisher,chat,p2p;
var qualityOpen=false;
var torchOn=false;
var filterOn=false;
var screenOrientation='portrait_up';
var localId,remoteId;
var publishOn=false;
var is_mute = 1;

//获取观众总数及观众列表信息
function initUserList(){
	chat.getRoomMemberCount(function(ret, err) {
		 if (ret) {
				 $('#viewerCount').text(ret.count);
		 }
	});
	 chat.queryUserList({index:1,total:20},function(ret, err) {
			if( ret ){
					 var ht_user='<div class="viewer-list-item aui-ellipsis-1 aui-padded-l-15"><img class="crown" src="../image/publisher/crown.png" />主播</div>';
				 for(var i=0;i<ret.entities.length;i++){
					ht_user+=
						'<div class="viewer-list-item aui-ellipsis-1" data-account="'+ret.entities[i].account+'" tapmode onclick="onUserClick(this);event.cancelBubble=true;">'+ret.entities[i].nickname+'</div>';
				 }
				 $('#viewerList').html(ht_user);
			}else{
					 alert( JSON.stringify( err ) );
			}
	});
}

function insertChartContent(type,sender,content){
	if(type=='sys')
		$('#chartList').append('<div class="chart-item sys-text">'+content+'</div>');
	else if(type=='syserro')
		$('#chartList').append('<div class="chart-item sys-text-erro">'+content+'</div>');
	else if(type=='user')
		$('#chartList').append('<div class="chart-item"><font class="aui-text-success">'+sender+'：</font>'+content+'</div>');
	else
		$('#chartList').append('<div class="chart-item"><font class="aui-text-danger">'+sender+'：</font>'+content+'</div>');

	$('#chartList').animate({
		scrollTop:$('#chartList').scrollTop()+50
	}, 500);
}


function closeAlert(){
	var dialogBox = api.require('dialogBox');
	dialogBox.alert({
			texts: {
					content: '确定要退出直播？',
					leftBtnTitle: '退出',
					rightBtnTitle: '取消'
			},
			styles: {
					bg: 'rgba(0,0,0,0.5)',
					corner: 5,
					w: 230,
					content: {
							color: '#FFFFFF',
							size: 14
					},
					left: {
							marginB: 15,
							marginL: 10,
							w: 80,
							h: 30,
							corner: 5,
							bg: '#9F61E8',
							color: '#FFFFFF',
							size: 12
					},
					right: {
							marginB: 15,
							marginL: 50,
							w: 80,
							h: 30,
							corner: 5,
							bg: '#DDDDDD',
							color: '#999999',
							size: 12
					}
			}
	}, function(ret) {
			if (ret.eventType == 'left') {
				  var alivcLivePusher = api.require('alivcLivePusher');
					dialogBox.close({
							dialogName: 'alert'
					});
					api.sendEvent({name: 'menuGoBack'});
					alivcLivePusher.stopPush();
					api.closeFrame({
				   name: 'video_push_frm'
				        });
				  api.closeFrame({
				   name: 'video_push_info0_frm'
				  });
			}else if (ret.eventType == 'right') {
					dialogBox.close({
							dialogName: 'alert'
					});
			}
	});
}

//展开清晰度下拉框
function onQualityClick(){
	if(!qualityOpen){
		qualityOpen=true;
		$('#qualityOption').show();
	}else{
		qualityOpen=false;
		$('#qualityOption').hide();
	}
}
//设置静音
function setMuteL(){
		//静音
		if(is_mute == 0){
				is_mute = 1;
		}else{
				is_mute = 0;
		}
		console.log(is_mute);
		//alert(is_mute);
		api.sendEvent({
				name: 'setMuteL',
				extra: {type: is_mute}
		});
}

//选择清晰度
function onQualityItemClick(tag){
	qualityOpen=false;
	$('#qualityOption').hide();
	$('#quality').html($(tag).text()+'<i class="aui-iconfont aui-icon-down aui-margin-l-10"></i>');
}

function showViewerList(){
	$('#viewerListBtn').hide();
	setTimeout(function() {
					$('#viewerList').show()
			},
			300)
}

function hideViewerList(){
	$('#viewerListBtn').show();
	$('#viewerList').hide();
}


function showConsole(){
	$('#consoleMain').hide();
	$('#consoleMain').css('background','transparent');
	if(!publishOn)
		$('#consoleMainBtn').css('background','#56B363');
	else
		$('#consoleMainBtn').css('background','#C76B5C');
	$('#console').show();
}

function hideConsole(){
	$('#consoleMain').show();
	$('#consoleMain').css('background','transparent');
	$('#consoleMainBtn').css('background','#FFFFFF');
	$('#console').hide();
}

//开启直播
function startPublisher(tag){
	//暂停
	if(is_start){
			is_start = 0;
			insertChartContent('sys','系统','停止直播');
			$(tag).css('background','#C76B5C');
			api.sendEvent({
					name: 'stopAndStart',
					extra: {type: 'pauseL'}
			});
	//开始
	}else{
			is_start = 1;
			insertChartContent('sys','系统','开始直播');
				$(tag).css('background','#56B363');
			api.sendEvent({
					name: 'stopAndStart',
					extra: {type: 'resumeL'}
			});
	}
}

//设置前后摄像头
function switchCamera(){
	api.sendEvent({name: 'switchCameraL'});
}

function shareurl() {
	var sharedModule = api.require('shareAction');
	var rid = $api.getStorage('rid');
	console.log(rid);
	sharedModule.share({

			text: '我是一阵风直播',
			thumbnail:'../image/share/message.png',
			path: 'http://xcx.lmyyst.com/app/index.php?i=2&c=entry&rid='+rid+'&do=index&m=wxz_wzbagent',
			type: 'url'
	});
}

//设置横屏竖屏
function setScreen(){
	if(screenOrientation=='portrait_up'){
		screenOrientation='landscape_left';
	}else{
		screenOrientation='portrait_up';
	}

	api.setScreenOrientation({
			orientation: screenOrientation
	});
}

//设置闪光灯
function setTorch(){
	//静音
	if(is_flash == 0){
			is_flash = 1;
	}else{
			is_flash = 0;
	}
	api.sendEvent({
			name: 'setFlashL',
			extra: {type: is_flash}
	});
}

//设置滤镜
function setFilter(){
	if(is_beauty == 0){
			is_beauty = 1;
	}else{
			is_beauty = 0;
	}
	api.sendEvent({
			name: 'setBeautyOn',
			extra: {type: is_beauty}
	});
}
function resetmask(){
	$('#chartInput').blur();
	//清晰度
	qualityOpen=false;
	$('#qualityOption').hide();
	//观看人
	hideViewerList();
	//主控按钮
	hideConsole();
}
</script>
</html>
